<template>
  <div class="publish-container">
    <h2 style="text-align: center">选项得分配置</h2>
    <div class="box">
      <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
        <el-form-item label="选项" prop="name">
          <el-input
            v-model="queryParams.label"
            placeholder="请输入选项"
            clearable
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"> 搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"> 重置</el-button>
        </el-form-item>
      </el-form>
      <!-- table区域-begin -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"> 新增</el-button>
        </el-col>
      </el-row>
      <el-table style="margin-top: 10px" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="选项" align="center" prop="label" />
        <el-table-column label="得分" align="center" prop="score" />
        <!--        <el-table-column label="表单key" align="center" prop="formKey" />-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <form-score-modal ref="modalForm" @ok="submitOk"></form-score-modal>
  </div>
</template>

<script>
import { TduckListMixin } from '@/mixins/TduckListMixin'
import FormScoreModal from '@/views/form/score/FormScoreModal.vue'
import { getRequest, postRequest } from '@/api/baseRequest'
import Pagination from '@/components/Pagination'

export default {
  name: 'index',
  mixins: [TduckListMixin],
  components: { FormScoreModal, Pagination },
  data() {
    return {
      formKey: '',
      url: {
        list: '/form/score/list',
        add: '/form/score/add',
        update: '/form/score/update',
        del: '/form/score/delete'
      }
    }
  },
  created() {
    this.formKey = this.$route.query.key
    // this.getList()
  },
  methods: {
    handleAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.form.formKey = this.formKey
      this.title = '添加选项得分配置'
    },
    getList() {
      this.loading = true
      console.log(this.queryParams)
      let param = this.getQueryParams()
      param.formKey = this.formKey
      getRequest(this.url.list, param).then((response) => {
        console.log(response)
        this.dataList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleUpdate(row) {
      this.$refs.modalForm.form = row
      this.$refs.modalForm.update()
    },
    handleDelete(row) {
      postRequest(this.url.delete, { id: row.id }).then((res) => {
        this.$message.info(res.msg)
      })
    },
    submitOk() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.publish-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  min-height: 84vh;
  overflow-y: auto;
}

.box {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: white;
}
</style>
